<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <!--
        1.JS存在的问题
        a>JS存在兼容性问题 不同的浏览器之间的兼容
        b>代码相对复杂,较多

        2.jquery出现
        a>能够轻松操作DOM
        b>很少的代码写更多的功能
        c>实现各种特效和动画
    -->
    <div>
        <p>
            <img class="img1" src="img/img_01.jpg">
            <img src="img/img_01.jpg">
            <img src="img/img_01.jpg">

        </p>
    </div>
        <button>点</button>
        <button class="btn1">动画</button>

    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script type="text/javascript">
       //获取标签
//        alert($('img').attr('src'))
        //改变标签中的内容
//        $('img').attr('src','img/img_04.jpg')
        //改变宽度
//        $('img').attr('width','60px')

        //隐藏标签
       $('button').click(function(){
           //点击按钮隐藏
//           $('img').hide();
//           $('img').toggle();



       })

       //鼠标移动
        //鼠标放在图片上面删除所有图片
//       $('img').mousemove(function(){
////          $('img').remove()
//           $('img').attr('width','200')
//
//       });

        //点击
       $('img').click(function(){

//           alert('1')
       })

        //css中所有的选择器在jquery都通用

//        alert($('.img1').attr('src'))


        //动画
       $('.btn1').click(function(){

           $('img').toggle("normal","linear",function(){

           })
       })

    </script>



</body>
</html>